<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8">
    <title>事件派遣</title>
    <style type="text/css">
        h3 {
            text-align: center;
        }
        .wrapper {
            margin: 25px auto;
            border: 1px solid blue;
            width: 80vw;
            height: 25vh;
        }
        .wrapper:hover {
            background: #dfdfdf;
        }
    </style>
</head>
<body>

    <h3>事件派遣</h3>

    <div class="wrapper first"></div>

    <div class="wrapper second"></div>

    <script type="text/javascript">
        // 根据CSS选择器选择匹配该选择器的首个元素
        const f = document.querySelector( '.first' );
        const s = document.querySelector( '.second' );

        const handler = evt => {
            console.log( 'event: ' , evt );
            let target = evt.target ;
            console.log( target );
            // 创建一个自定义的事件
            let event = new Event( '轰炸' );
            // 通过 事件目标(s) 派遣 自定义事件(event)
            s.dispatchEvent( event );
        }

        // 绑定事件监听器
        // 当 click 事件 发生时 就调用 handler 函数并将事件对象传递给该函数
        f.addEventListener( 'click' , handler , false );

        const listener = evt => {
            console.log( evt );
            let t = evt.target ;
            console.log( t );
        }
        s.addEventListener( '轰炸' , listener , false );
    </script>
    
</body>
</html>